<template>
  <main class="main">
    <div class="box">
      <button class="btn-toggle" @click="isOpen1 = !isOpen1">
        {{ isOpen1 ? "热映中" : "即将上映" }}
      </button>
      <HotMovieList v-show="isOpen1" />
      <ComingMovieList v-show="!isOpen1" />
    </div>

    <WatchedMovieList
      :isOpen2="isOpen2"
      :toggleOpen2="toggleOpen2"
      :watched="watched"
      :avgSc="avgSc"
      :avgUserRating="avgUserRating"
    />
  </main>
</template>

<script>
import HotMovieList from "./HotMovieList.vue";
import ComingMovieList from "./ComingMovieList.vue";
import WatchedMovieList from "./WatchedMovieList.vue";

export default {
  data() {
    return {
      isOpen1: true,
    };
  },

  props: ["watched", "isOpen2", "toggleOpen2", "avgSc", "avgUserRating"],
  components: { WatchedMovieList, HotMovieList, ComingMovieList },
};
</script>
